<template>
	<view class="">
		<view class="u-flex u-flex-between u-flex-y-center u-he-100 u-lihe-100 u-p-l-30 u-p-r-30"
			style="border-bottom: 1px solid #000;">
			<view>
				ASMR
			</view>
			<view class="u-flex u-flex-y-center ">
				<u-icon name="search" color="#ffffff" size="21" class='u-m-r-15'></u-icon>
				<u-icon name="qq-fill" color="#ffffff" size="21"></u-icon>
			</view>
		</view>
		<view class="">
			<image src="../../static/images/app.jpg" mode="" class="u-he-300 u-wdd-100"></image>
		</view>
		<view class=" u-p-t-40 u-p-l-40 u-p-r-40">
			<view class="flex  p-xs margin-bottom-sm mb-sm">
				<view class="flex-twice  padding-sm margin-xs radius text-center" @click="handle('pages/home/zblist')">
					<image src="../../static/images/jifen.png" mode="" class="u-wd-120 u-he-120"></image>
					<view class="u-p-t-15">
						ASMR主播
					</view>
				</view>
				<view class="flex-twice  padding-sm margin-xs radius text-center" @click="handle('pages/home/ins')">
					<image src="../../static/images/jifen.png" mode="" class="u-wd-120 u-he-120"></image>
					<view class="u-p-t-15">
						INS动态
					</view>
				</view>
				<view class="flex-twice  padding-sm margin-xs radius text-center"
					@click="handleSwitc('pages/index/trigger')">
					<image src="../../static/images/jifen.png" mode="" class="u-wd-120 u-he-120"></image>
					<view class="u-p-t-15">
						触发音
					</view>
				</view>
			</view>
		</view>
		<view class="u-flex u-flex-between u-flex-wrap u-p-30">
			<view class="u-flex u-flex-between u-flex-y-center u-wdd-100" style="padding: 8px;">
				<view class="u-font-14 subtitle">
					首页推荐
				</view>
				<view class="u-flex u-flex-y-center u-font-14">
					更多 <u-icon name="arrow-right" color="#fff" size="18"></u-icon>
				</view>
			</view>
			<view class="u-flex u-flex-between u-flex-wrap u-p-t-30">
				<view class="u-wdd-48 u-m-b-40" v-for="item in 4" @click="handle('pages/list/details')">
					<image src="../../static/images/pic.png" mode="" class="u-wdd-100 u-he-200 b-r-10"></image>
					<view class="u-p-t-20 u-font-13 title" style="padding: 8px;">
						混合ASMR
					</view>
				</view>
			</view>
		</view>
		<view class="text-center c-9e">
			© 2020 🍅ASMR
		</view>
		<view class="u-p-l-50 u-p-r-50 u-p-b-50 u-p-t-20 c-9e">
			本站所有视频和音频均收集于互联网，版权归属原创作者，如有侵权请邮件通知我们：admin@qqasmr.com
		</view>

	</view>
</template>

<script>
	export default {
		methods: {
			handle(path) {
				uni.$u.route(path)
			},
			handleSwitc(path) {
				uni.$u.route({
					url: path,
					type: 'switchTab',
				})
			}
		}
	}
</script>
<style>
	.main {
		min-height: 100vh;
		background: #282828;
	}
	.title {
		font-size: 0.75rem;
		padding-left: 4px;
	}
	.subtitle{
		font-size: 1.2rem;
	}
	
</style>